<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻管理系统主页</title>
    <link rel="stylesheet" type="text/css" href="../css/admin.css">
</head>
<body>
    <main>
        <div class="div1">
            <h2>新闻管理系统</h2>
            <h2 class="home" id="home"><a href="welcome.html" target="main" onclick=changeBG_head('home')>主页</a></h2>
          <div class="div11">
              <!--第一个菜单栏-->
              <div class="item">
                  <div class="head" onclick="showMenu('i1')">新闻管理</div>
                  <!--第一个下拉选择框-->
                  <div id="i1" class="content hid">
                      <div id="i1_1" class=""><a href="news/news.html" target="main" onclick="changeBG('i1_1')">文章管理</a></div>
                      <div id="i1_2" class=""><a href="news/category.html" target="main" onclick="changeBG('i1_2')">分类管理</a></div>
<!--                      <div id="i1_3" class=""><a href="news/news.html" target="main" onclick="changeBG('i1_3')">文章管理</a>评论管理</div>-->
                  </div>
              </div>
              <!--第二个菜单栏-->
              <div class="item">
                  <div class="head" onclick="showMenu('i2')">用户管理</div>
                  <!--第二个下拉选择框-->
                  <div id="i2" class="content hid">
                      <div id="i2_1" class=""><a href="user/user.html" target="main" onclick="changeBG('i2_1')">用户列表</a></div>
<!--                      <div id="i2_2" class=""><a href="welcome.html" target="main" onclick="changeBG('i2_2')">添加用户</a></div>-->
<!--                      <div id="i2_3" class="">删除用户</div>-->
                  </div>
              </div>
          </div>
        </div>
        <div class="div2">
<!--            <a href="#">收起</a>-->
            <div class="div21">
                <div class="avatar">
                    <img src="../img/admin/login/1.jpg">
                    <a href="#" id="setting">删库跑路</a>
                </div>
                <div id="setting_div">
                    <ul>
                        <li><a href="../index.html">个人资料</a></li>
                        <li><a href="#">退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="div3" id="main">
            <iframe name="main" src="welcome.html"></iframe>
        </div>
    </main>
</body>
<script>

    // 右上角设置的展开和隐藏
    const setting = document.getElementById("setting");
    const setting_div = document.getElementById("setting_div");

    setting.addEventListener('click', function () {
        setting_div.style.display='block';
    })
    document.addEventListener('click', function (e) {
        setting_div.style.display='none';
    })
    setting.addEventListener('click', function (e) {
        e = window.event || event;
        e.stopPropagation();
    })
    setting_div.addEventListener('click', function (e) {
        e = window.event || event;
        e.stopPropagation();
    })

    //控制左侧菜单的收缩
    function showMenu(nid){
        //找到鼠标点击的标签
        const header = document.getElementById(nid);
        const isHeader = header.classList.contains("hid");
        /* 找到所有的“class=item”标签（三个）*/
        const item_list = header.parentElement.parentElement.children;
        //循环,并给每个下拉选择框加上hid属性
        for(let i=0; i<item_list.length; i++){
            const item = item_list[i];
            item.children[1].classList.add("hid");
        }
        if(isHeader){
            //去除鼠标点击的标签的hid属性，使对应的下啦选择框显示出来
            document.getElementById(nid).classList.remove("hid");
        }
    }

    // 控制左侧导航选择后的背景颜色
    function changeBG(nid){
        const back = document.getElementById(nid);
        const back_list = back.parentElement.parentElement.parentElement.children;
        for(let i=0; i<back_list.length; i++){
            const backs = back_list[i];
            for(let j=0; j<backs.children[1].children.length; j++){
                backs.children[1].children[j].classList.remove("back");
                backs.children[1].children[j].classList.add("backBG");
            }
        }
        document.getElementById('home').classList.add("backHome");
        document.getElementById(nid).classList.remove("backBG");
        document.getElementById(nid).classList.add("back");
    }
    // 控制左侧导航选择后主页的背景颜色
    function changeBG_head(nid){
        const back = document.getElementById(nid);
        const back_list = back.parentElement.children[2].children;
        for(let i=0; i<back_list.length; i++){
            const backs = back_list[i];
            backs.children[1].classList.add("hid");
        }
        for(let i=0; i<back_list.length; i++){
            const backs = back_list[i];
            for(let j=0; j<backs.children[1].children.length; j++){
                backs.children[1].children[j].classList.add("backBG");
            }
        }
        document.getElementById('home').classList.remove("backHome");
    }

</script>

</html>